<template>
  <div id="app">
    <my-window :show.sync="valueChild" url="/profile">
      <div style="border:1px solid orange;">
      这是一个toggle窗口==》{{ valueChild }}
        <base-button>
          <template v-slot:header>
            <h1>Here is header</h1>
          </template>
          <template v-slot:default>
            <h1>Here is default</h1>
          </template>
          <template v-slot:footer>
            <h1>Here is footer</h1>
          </template>
        </base-button>
      <button>slot</button>
    </div>
    </my-window>
    <button @click="closeDiv">Toggle</button>

    <span>{{ lovingVue }}</span>
    <base-checkbox @change1="updateStatus" v-model="lovingVue"></base-checkbox>
    <div>父组件的toCity{{toCity}}</div>
    <base-btn @change="updateChecked" @show-city-name="updateCity" :stafflist="stafflist" :deplist="deplist" :sendData="toCity" required placeholder="Enter your username"></base-btn>
    <div>{{ $attrs }}</div>
    <p>{{ identity }}</p>
    <p>{{ normalizedTitle }}</p>
    <p>{{ message }} 属性信息：{{ message }}</p>
    <p>{{ book }}</p>
    <div v-for="user in userlist">
      <span>{{ user.name }}</span>
      <span>{{ user.age }}</span>
      <span>{{ user.gender }}</span>
    </div>
    <p>{{ animal.name }} - {{ animal.category }}</p>
    <div v-for="weapon in weapons">{{ weapon }}</div>
  </div>
</template>

<script>
  import MyWindow from "./my-window";
  import BaseCheckbox from "./base-checkbox";
  import BaseBtn from "./base-btn";
  import BaseButton from "./base-button"
    export default {
        name: "button-counter",
        components: {
          BaseBtn,BaseCheckbox,MyWindow,BaseButton
        },
        inheritAttrs: false,
        props: {
          id: Number,
          title: {
            type: String,
            validator: function (v) {
              console.log(v)
              return ['AK47','M16','B2隐身战斗机'].indexOf(v) !== -1
            },
          },
          book: String,
          message: String,
          desc: String,
          animal: {
            type: Object,
            default: function () {
              return {name: '熊猫', category: '猫科动物'}
            }
          },
          weapons: {
            type: Array,
            default: function () {
              return ['歼击机20']
            }
          },
          userlist: {
            type: Array,
            default: function(){
              return {name: '李云龙',age: 56 ,gender: '男'}
            }
          }
        },
        data () {
          return {
            identity: this.id,
            toCity: '北京',
            lovingVue: true,
            valueChild: true,
            stafflist:[
              {
                "departmentName": "test",
                "score": 5,
                "staffName": "谢军",
                "isThumbs": false,
                "staffId": 9334
              },
              {
                "departmentName": "test",
                "score": 4,
                "staffName": "45454545",
                "isThumbs": false,
                "staffId": 1014
              },
              {
                "departmentName": "产品研发一部",
                "score": 4,
                "staffName": "何任晖",
                "headimgurl": "https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83ep17oYhmvdCFAkwtmhQ5zndRg5RJmf4DLXBslALLtupJtMIqEicPWibTPRQfhMwjtw5czib8v0nHpWPQ/132",
                "isThumbs": false,
                "staffId": 1400
              },
              {
                "departmentName": "测试部门人数1",
                "staffName": "吴嘉鑫",
                "isThumbs": false,
                "staffId": 1015
              },
              {
                "departmentName": "test",
                "staffName": "齐继刚",
                "isThumbs": false,
                "staffId": 1017
              },
              {
                "departmentName": "销售二部",
                "staffName": "赵艳果",
                "isThumbs": false,
                "staffId": 1018
              },
              {
                "departmentName": "销售二部",
                "staffName": "陈诗梦",
                "isThumbs": false,
                "staffId": 1020
              },
              {
                "departmentName": "销售二部",
                "staffName": "霍春娜",
                "isThumbs": false,
                "staffId": 1021
              },
              {
                "departmentName": "测试部门人数3",
                "staffName": "王成振",
                "isThumbs": false,
                "staffId": 1022
              },
              {
                "departmentName": "销售二部",
                "staffName": "高亚芳",
                "isThumbs": false,
                "staffId": 1024
              }
            ],
            deplist: [
              {
                "score": 16,
                "childrenNum": 16,
                "isThumbs": false,
                "thumbsNum": 5,
                "depid": 403,
                "depName": "神州安信"
              },
              {
                "childrenNum": 2,
                "isThumbs": false,
                "thumbsNum": 1,
                "depid": 1736,
                "depName": "中国移动"
              },
              {
                "childrenNum": 0,
                "isThumbs": false,
                "thumbsNum": 2,
                "depid": 1747,
                "depName": "测试部门"
              }
            ]
          }
        },
        methods: {
          updateCity: function (data) {
            console.log("===updateCity data===" )
            this.toCity = data.cityName
            console.log(data)
          },
          updateChecked: function (d) {
            console.log("=============="+d)
          },
          updateStatus: function (d) {
            console.log("====d======"+d)
            this.lovingVue = d
          },
          closeDiv: function () {
            this.valueChild = !this.valueChild
          }
        }
      ,
      computed: {
          normalizedTitle: function () {
            console.log("====attrs===")
            console.log(this.$attrs)
            return this.title.trim().toUpperCase()
          }
      }

    }
</script>

<style scoped>

</style>
